
<script>
import { basePopupMixins } from '../../../popupMixin'
import VForm from '../../../VForm/index.vue'
import { cloneDeep } from 'lodash-es'
import { resolveDicts } from '../../utils'
import { controlSize, defaultAttrs } from '@lib/default'

export default {
  mixins: [
    basePopupMixins({
      getDialogAttrs() {
        return Object.assign({
          title: this.isUpdate ? '编辑' : '创建',
          width: defaultAttrs.createAndUpdatePopupWidth
        }, this.config.dialogAttrs)
      },
      getDialogListeners() {
        return {
          closed: () => {
            this.$refs.VForm.reset()
            this.config.onHide && this.config.onHide.call(this, this.isUpdate, this.source)
          }
        }
      },
      beforeShow(e) {
        this.init(e)
        this.config.onShow && this.config.onShow.call(this, this.isUpdate, this.source)
      },
      render(h) {
        return h(VForm, {
          props: {
            options: this.formOptions
          },
          staticClass: 'v-create_and_update--form',
          ref: 'VForm'
        })
      },
      footer() {
        return {
          clickConfirmButton: this.handleConfirm
        }
      }
    })
  ],

  props: {
    config: { type: Object, required: true }
  },

  data() {
    return {
      isUpdate: false,
      formOptions: {
        items: []
      },
      source: null,
      onSuccess: null,
    }
  },

  created() {
    this.normalizeConfig()
  },

  methods: {
    init({ isUpdate, data, onSuccess }) {
      this.isUpdate = isUpdate
      this.onSuccess = onSuccess

      if (isUpdate) {
        this.source = cloneDeep(data)
        setTimeout(() => {
          Object.keys(this.source).forEach(key => {
            this.$refs.VForm.setValue(key, this.source[key])
          })
          this.$refs.VForm.syncFormModel()
        })
      } else {
        this.source = null
      }
    },
    normalizeConfig() {
      const config = cloneDeep(this.config)

      const formOptions = {}
      formOptions.items = config.items.map(item => {
        if (item.show) {
          const show = item.show
          item.show = (model) => {
            return show(model, this.isUpdate)
          }
        }

        if ('dicts' in item) {
          resolveDicts(item)
        }

        return item
      })

      formOptions.attrs = config.formAttrs || {}
      formOptions.attrs.size = formOptions.attrs.size || controlSize
      this.formOptions = formOptions
    },
    async handleConfirm({ close, cancelLoading }) {
      try {
        let params = await this.$refs.VForm.validate()

        if (this.config.transformParams) {
          params = await this.config.transformParams(params)
        }

        if (this.isUpdate) {
          await this.config.update(params, this.source)
        } else {
          await this.config.create(params)
        }

        setTimeout(() => {
          this.onSuccess && this.onSuccess()
          close()
        }, 500)
      } catch (e) {
        cancelLoading()
      }
    },
    /**
     * 刷新字典
     */
    refreshDicts(prop) {
      const item = this.formOptions.items.find(item => item.prop === prop)
      item && item.refreshDicts && item.refreshDicts()
    }
  }
}
</script>

<style lang="less">
.v-create_and_update--form {
  .el-input,
  .el-textarea {
    width: 300px;
  }

  .el-select {
    .el-input {
      width: auto;
    }
  }
}
</style>
